<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表白墙</title>

    <style>
        * {
            /*消除浏览器的默认样式*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 400px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
        }
        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }
        .row {
            /*开启弹性布局*/
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span {
            width: 100px;
            line-height: 40px;
        }
        .edit {
            width: 200px;
            height: 30px;
        }
        .submit,.revert {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
            border-radius: 10px;
        }
        /*点击有反馈*/
        .submit:active,.revert:active{
            background-color: salmon;
        }
    </style>

</head>
<body>
<div class="container">
    <h1>表白墙</h1>
    <p>输入后点击提交, 会将信息显示在表格中</p>
    <div class="row">
        <span>谁: </span>
        <input class="edit" type="text">

    </div>
    <div class="row">
        <span>对谁: </span>
        <input class="edit" type="text">
    </div>
    <div class="row">
        <span>说什么: </span>
        <input class="edit" type="text">
    </div>
    <div class="row">
        <input type="button" value="提交" class="submit">
    </div>
    <br>
    <div class="row">
        <input type="button" value="撤销" class="revert">
    </div>
</div>

<script >
    //实现提交操作,点击提交按钮,就能把用户输入的内容提交到页面上显示
    //点击的时候,获取到三个输入框中的文本内容
    //创建一个新的 div.row ,把内容构造到这个 div 中即可

    let containDiv = document.querySelector('.container');
    let inputs = document.querySelectorAll('.edit');
    let button  = document.querySelector('.submit');

    button.onclick = function (){
        //1.获取到三个输入框的内容
        let from = inputs[0].value;
        let to = inputs[1].value;
        let msg = inputs[2].value;
        if(from == '' || to == ''||msg == ''){
            return;
        }

        //2.构造新 div
        let newDiv = document.createElement('div');
        //给新创建的div 设置 上样式
        newDiv.className = 'row message';
        newDiv.innerHTML =  from+'对'+to+'说'+msg;
        containDiv.appendChild(newDiv);

        //3.清空之前的输入框内容
        for(let input2 of inputs){
            input2.value = '';
        }

        let button2  = document.querySelector('.revert');
        button2.onclick = function (){
            //选中所有的row,找到最后一个row,删除
            let rows  = document.querySelectorAll('.message');
            if(rows.length == null || rows.length == 0){
                return;
            }
            containDiv.removeChild(rows[rows.length -1]);
        }
    }
</script>

</body>
</html>